<template>
  <el-col :span="line * 8">
    <div class="zw-card">
      <div class="header">
        <el-icon class="icon">
          <HelpFilled />
        </el-icon>
        <div class="title">{{ title }}</div>
      </div>
      <div class="body" :style="style">
        <slot></slot>
      </div>
    </div>
  </el-col>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const props = withDefaults(defineProps<{
  title: string,
  line: number,
  center?: boolean
}>(), {
  title: "",
  line: 1,
  center: true
});
const style = ref(props.center ? {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
} : {
})
</script>
<style lang="scss" scope>
.zw-card {
  height: 360px;
  display: flex;
  flex-direction: column;
  border: 1px solid v.$border-color;
  // margin-top: 12px;
  // box-shadow: 0px 0px 4px 4px v.$border-color;

  .header {
    display: flex;
    flex-shrink: 1;
    height: 48px;
    align-items: center;
    border-bottom: 1px solid v.$border-color;
    padding-left: 12px;
    color: v.$primary-color;

    .title {
      font-size: 16px;
      font-weight: 600;
      margin-left: 4px;
    }
  }

  .body {
    height: 312px;
    padding: 8px 16px;
  }
}
</style>
